<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>index</title>
  <link rel="stylesheet" href="./static/layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">jexcel demo</div>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">自定义表格</a>
          <dl class="layui-nav-child">
            <dd><a href="index">表格管理</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <button type="button" id="add" class="layui-btn layui-btn-normal" style='margin-left:20px;margin-top:30px'>新增</button>
    <button type="button" id="refresh" class="layui-btn layui-btn-normal" style='margin-left:20px;margin-top:30px'>刷新</button>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	  <legend>表格列表</legend>
	</fieldset>
	<table class="layui-hide" id="test" lay-filter="test"></table>
  </div>
  
  
</div>
</body>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript" src="./static/layui/layui.js"></script>

<script type="text/javascript" th:inline="none">
//JS 
layui.use(['element', 'layer', 'util', 'table'], function(){
  var element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,table = layui.table
  ,$ = layui.$;
  	table.render({
	    elem: '#test'
	    ,url:'./list'
	    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度
	    ,cols: [[
	      {field:'id',  title: 'ID', sort: true}
	      ,{field:'name', title: '模板名称'}
	      ,{field:'code',  title: '模板编码', sort: true}
	      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
	    ]]
	    ,page: true
	});
  	//监听行工具事件
    table.on('tool(test)', function(obj){
      var data = obj.data;
      console.log(obj)
      if(obj.event === 'del'){
        layer.confirm('真的删除行么', function(index){
          obj.del();
          layer.close(index);
          $.post("./delete",{"id":data.id},function(data){},"json");
        });
      } else if(obj.event === 'edit'){
        window.open("./table?id="+data.id)
      }
    });
  	$("#add").on('click',function(){
  		window.open("./table?id=0");
  	});
  	$("#refresh").on('click',function(){
  		table.reload('test', {
  		  page: {
  		    curr: 1 //重新从第 1 页开始
  		  }
  		});
  	});
});
</script>

</html>